<script setup lang="ts">
import { computed } from '@vue/reactivity'

// defineProps(['icon', 'text' ,'color'])
let obj = defineProps(['icon', 'text', 'color'])
var isShow:boolean

if (obj.icon == undefined) {
    isShow = false
}
else {
    isShow = true
}
// console.log(isShow)

</script>
<template>
    <span class="align">
        <el-icon :color="color" v-show="isShow">
            <component :is="icon"></component>
        </el-icon>
        <span class="mar">{{ text }}</span>
    </span>
</template>
<style scoped>
.align {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
}

.mar {
    margin-left: 3px;
    font-size: 13px;
    background-color: white;
}

.align:hover {
    color: #00c792
}
</style>